<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:cc="http://java.sun.com/jsf/composite"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <!-- INTERFACE -->
    <cc:interface>
    </cc:interface>

    <!-- IMPLEMENTATION -->
    <cc:implementation>
        <ui:param name="urlRoot" value="#{request.requestURL.substring(0, request.requestURL.length() - request.requestURI.length())}#{request.contextPath}"/>
        <style>
            /* START NAV MENU */
            nav {
                background-color:appworkspace;
                height:40px;
            }

            nav ul {
                font-family: Arial, Verdana;
                font-size: 20px;
                margin: 0;
                padding: 0;
                list-style: none;
            }

            nav ul li {
                display: block;
                position: relative;
                float: left;
                /*                line-height: 40px;*/

            }

            nav li ul { 
                /*                display: none; */
                opacity: 0;
                position: absolute; 
                left: 0; 
                padding: 0;
                margin: 0;
            }

            nav ul li a {
                background-color: #820015;
                background-repeat: repeat-x;
                background-image: url('#{urlRoot}/css/images/bg_menu.jpg');
                color: #FFFFFF;
                display: block;
                height: 30px;
                padding: 7px 15px 3px;
                text-align: center;
                text-decoration: none;
                white-space: nowrap;
                width: 109px;
                font-weight: bold;
                margin-right: 1px;
            }
            nav ul li:last-child a {
                margin-right: none;
            }

            nav ul li a:hover { 
                background: #a50029;
            }

            nav li:hover ul {
                opacity: 1;
                /*                display: block;*/
                position: absolute;
                height:30px;
                z-index: 10;
            }

            nav li ul li { 
                font-size: 13px;
                float: none; 
                position: static;
                height: 0; 
                line-height: 0; 
                background: none; 
                overflow: hidden;
            }

            nav li:hover ul li {
                float: none;
                font-size: 13px;
                height: 40px; 
                line-height: 40px; 

            }

            nav li:hover a { 
                background: #a50029; 
                height:30px; /* Height of lower-level nav items is shorter than main level */
            }

            nav li:hover li a:hover { 
                background: chocolate; 
            }

            nav ul li ul li a {
                text-align:left; /* Top-level items are centered, but nested list items are left-aligned */
                z-index: 10;
                border-top: 1px solid #383;
            }

            nav li, nav li a,nav li ul { 
                transform: all 0.5s;
                -webkit-transition: all 0.5s; 
                -moz-transition: all 0.5s; 
                -o-transition: all 0.5s; 
                -ms-transition:all 0.5s; 
            }

            nav li ul li { 
                transition: height 0.5s;
                -webkit-transition: height 0.5s;
                -moz-transition: height 0.5s;
                -o-transition: height 0.5s;
                -ms-transition: height 0.5s; 
            }
            /* END NAV MENU */
        </style>
        <script>
            
            
            //             <![CDATA[
           
            //             ]]>
        </script>
        <div id="menu_bar">
            <nav>
                <ul>
                    <li><a href="#{urlRoot}/home.xhtml">Home</a></li>
                    <li><a href="#{urlRoot}/training.xhtml">Training</a>
                        <ul>
                            <li><a href="#{urlRoot}/training/career_package.xhtml">Career Package</a></li>
                            <li><a href="#{urlRoot}/training/junior_package.xhtml">Junior Package</a></li>
                            <li><a href="#{urlRoot}/training/premier_package.xhtml">Premier Package</a></li>
                        </ul>	

                    </li>
                    <li><a href="#">Gallery</a>
                        <ul>
                            <li><a href="#{urlRoot}/gallery/video.xhtml">Video</a></li>
                            <li><a href="#{urlRoot}/gallery/mix.xhtml">Mix</a></li>
                        </ul>	
                    </li>
                    <li><a href="#">Talent</a>
                        <ul>
                            <li><a href="#{urlRoot}/talent/dj.xhtml">DJ</a></li>
                            <li><a href="#{urlRoot}/talent/dancers.xhtml">Dancers</a></li>
                            <li><a href="#{urlRoot}/talent/singers.xhtml">Singers</a></li>
                            <li><a href="#{urlRoot}/talent/mc.xhtml">MC</a></li>
                        </ul>
                    </li>
                    <li><a href="#{urlRoot}/about_us.xhtml">About Us</a></li>
                    <li><a href="#{urlRoot}/contact.xhtml">Contact</a></li>
                </ul>

            </nav>

        </div><!--End #menu-->
    </cc:implementation>
</html>